<script setup lang="ts">
import { ref } from 'vue'
import type { AgriculturalProducts } from '@/types/home'
import { loadAgriculturalProductsUsingDetailGet } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'

// 获取传递的 ID 参数
const query = defineProps<{ id: string }>()
const agriculturalProductDetail = ref<AgriculturalProducts | null>(null)

// 加载农产品详情数据的函数
const loadAgriculturalProductsUsingDetailGetData = async () => {
  try {
    const res = await loadAgriculturalProductsUsingDetailGet(query.id)
    agriculturalProductDetail.value = res.data
  } catch (error) {
    console.error('Error fetching product detail:', error)
  }
}
// 分类映射对象
const categoryMap: { [key: number]: string } = {
  1: '水果',
  2: '蔬菜',
  3: '粮食',
  4: '肉类',
  5: '水产',
  6: '干货',
}
// 页面加载时调用数据加载函数
onLoad(() => {
  loadAgriculturalProductsUsingDetailGetData()
})
</script>

<template>
  <view class="article-detail">
    <view v-if="agriculturalProductDetail" class="article-content">
      <view class="article-title">{{ agriculturalProductDetail.productName }}</view>
      <view class="article-category"
        >分类: {{ categoryMap[agriculturalProductDetail.productCategory] }}</view
      >
      <view class="article-description">{{ agriculturalProductDetail.productDesc }}</view>
      <!-- 农产品图片 -->
      <image
        class="article-image"
        :src="agriculturalProductDetail.productImg"
        mode="widthFix"
      ></image>
      <!-- 农产品信息  备注: -->
      <view class="article-remark">{{ agriculturalProductDetail.remark }}</view>
    </view>
    <view v-else class="loading-text">加载中...</view>
  </view>
</template>

<style lang="scss">
.article-detail {
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  max-width: 750rpx;
  margin: 0 auto;
  box-sizing: border-box;
}

.article-content {
  margin-bottom: 20px;
}

.article-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.article-category {
  font-size: 16px; // 调换字号
  color: #999; // 文字虚化
  margin-bottom: 10px;
}

.article-description {
  font-size: 18px; // 调换字号
  margin-bottom: 20px;
}

.article-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 8px;
  max-height: 500px;
  object-fit: cover;
  min-height: 200px;
}

.article-remark {
  font-size: 16px;
  color: #333;
  text-align: right; // 文字靠右
  font-weight: bold; // 文字加粗
}

.loading-text {
  font-size: 18px;
  color: #999;
  text-align: center;
  padding: 20px;
}
</style>
